<template>
    <view class="bg-gray">
		<my-cu-custom :contentClass="'cu-custom-content-gradient-bg'" :cuCustomTop="15" ref="myCuCustom"
	
		:goVideo="false"
		>
			<block slot="backText">
				<view>
					<text class="text-xxl text-blod text-shadow font-title">{{ appletName }}</text>
					<text class="margin-left-sm">{{ appletSolgn }}</text>
				</view>
			</block>
			<block slot="right">
				<button class="text-green text-sm bg-white cuIcon cuIcon-weixin top-share text-lg" 
				style="line-height: unset;font-size: 16px;border: unset;"
				open-type="share"
				>分享</button>
			</block>
		</my-cu-custom>
		
		<view class="page-content">
			<u-swiper
				:list="banners"
				keyName="img"
				indicator
				indicatorMode="line"
				circular
				@click="bannerClick"
				></u-swiper>
			
			<view class="bg-white radius-lg margin-top-sm life-module" v-if="modules[0] != undefined">
				<view class="module-top margin-bottom-sm padding-left-sm padding-right-sm">
					<text class="text-color-main text-shadow font-title text-lg">{{ modules[0].title }}</text>
					<text class="margin-left-10 text-sm text-black">{{ modules[0].desc }}</text>
					<view class="module-top-line" :style="{background: `linear-gradient(to right, ${modules[0].line_color}, #fff)`}"></view>
				</view>
				
				<view class="cps_list">
					<u-grid :border="false" :col="modules[0].items.length" >
						<u-grid-item v-for="(cpsItem,cpsIndex) in modules[0].items" :key="cpsIndex" >
							<view class="cps_item" @click="navTo(cpsItem)">
								<view class="radius-10 padding-5 cps-item-mx margin-left-10 margin-right-10" :style="[{background: cpsItem.bg_color}]">
									<view class="margin-bottom-10 flex justify-start align-center">
										<img :src="cpsItem.logo"  class="cps_icon" alt="">
										<view class="cps_title text-bold font-title text-black">
											{{cpsItem.title}}
										</view>
									</view>
									<view class="cps_desc text-sm text-black">{{cpsItem.desc}}</view>
									<view class="cps_img bg-white radius-10"><img :src="cpsItem.img" alt=""></view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			
			<view class="bg-white radius-lg margin-top-sm life-module" v-if="modules[1] != undefined">
				<view class="module-top margin-bottom-sm padding-left-sm padding-right-sm">
					<text class="text-color-main text-shadow font-title text-lg">{{ modules[0].title }}</text>
					<text class="margin-left-10 text-sm text-black">{{ modules[0].desc }}</text>
					<view class="module-top-line" :style="{background: `linear-gradient(to right, ${modules[1].line_color}, #fff)`}"></view>
				</view>
				
				<view class="cps_list">
					<u-grid :border="false" :col="modules[1].items.length" >
						<u-grid-item v-for="(cpsItem,cpsIndex) in modules[1].items" :key="cpsIndex" >
							<view class="cps_item" @click="navTo(cpsItem)">
								<view class="radius-10 padding-5 cps-item-mx margin-left-10 margin-right-10" :style="[{background: cpsItem.bg_color}]">
									<view class="margin-bottom-10 flex justify-start align-center">
										<img :src="cpsItem.logo"  class="cps_icon" alt="">
										<view class="cps_title text-bold font-title text-black" >
											{{cpsItem.title}}
										</view>
									</view>
									<view class="cps_desc text-sm text-black">{{cpsItem.desc}}</view>
									<view class="cps_img bg-white radius-10"><img :src="cpsItem.img" alt=""></view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<view class="bg-white cu-list menu-avatar margin-top life-module" v-if="modules[2] != undefined">
				<view class="module-top margin-bottom-sm padding-left-sm padding-right-sm">
					<text class="text-color-main text-shadow font-title text-lg">{{ modules[2].title }}</text>
					<text class="margin-left-10 text-sm text-grey">{{ modules[2].desc }}</text>
					<view class="module-top-line" :style="{background: `linear-gradient(to right, ${modules[2].line_color}, #fff)`}"></view>
				</view>
				
				<view class="cu-item margin-bottom-sm bg-white" 
				v-for="(oItem,oIndex) in modules[2].items" 
				:key="oIndex"
				:style="[{animation: 'show ' + ((oIndex+1)*0.2+1) + 's 1'}]"
				>
					<view class="cu-avatar radius-lg lg">
						<img :src="oItem.img" class="radius-lg bg-white" style="height: 100%;" alt="">
					</view>
					<view class="content">
						<view class="text-blod"><view class="text-cut text-color-main font-title text-shadow font-title">{{oItem.title}}</view></view>
						<view class="text-sm flex"> <view class="text-cut text-black">{{oItem.desc}}</view></view>
					</view>
					<view class="action" @click="navTo(oItem)">
						<button class="cu-btn round text-white bg-theme shadow">{{ showBtnText(oItem.jump_way)}}</button>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog cu-modal-img" style="width: unset;">
				<image :src="copyImg" class="copy-img" mode='widthFix' alt="" :show-menu-by-longpress="true">
				
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">关闭</view>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
import { getIndexData } from "@/api/life.js";
import {mapState} from "vuex"
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			scrollTop:0,
			banners:[],
			modules:[],
		}
	},
	onPageScroll(e) {
		this.$refs.myCuCustom.pageScroll(e);
	},
	onLoad() {
		// this.initConf();
	},
	onShow() {
		this.initConf();
	},
	methods: {
		initConf(){
			var that = this;
			getIndexData().then(ret =>{
				that.banners = ret.data.banners;
				that.modules = ret.data.modules;
			});
		},
		showBtnText(jumpWay){
			let txt = '前往';
			switch(jumpWay) {
				case 'full_img':
				case 'modal_img':
				case 'full_tw':
					txt = '查看';
				break;
			}
			return txt;
		}
	}
	
}
</script>

<style lang="scss">
	.cu-custom-content-gradient-bg{
		background: linear-gradient(to bottom, $--theme-color, rgba(251, 222, 55, 0.0));
	}
	.top-share{
		padding: 3px 10px;
		border-radius: 15px;
	}
	.cu-custom-content{
		height: 10rem;
	}
	.cu-avatar.lg {
		height: 130rpx;
		width: 130rpx;
	}
	.page-content{
		margin-top: -90px;
		.life-module{
			padding: 10px 5px;
		}
		.module-top-line{
			width: 98%;
			height: 3px;
		}
		.cps_list{
			.cps_item{
				width: 100%;
				.bg-pink-rgba{
					background-color: rgba(243, 210, 238, 0.2);
				}
				.cps_icon{
					width: 35rpx;
					height: 35rpx;
					background-color: #fff;
					border-radius: 100%;
					margin-right: 5px;
				}
				.cps_icon_long{
					width: 35rpx;
					background-color: #fff;
					border-radius: 100%;
					margin-right: 5px;
				}
				.cps_img img{
					 width: 100%;
					 height: 4rem;
					 border-radius: 15px 15px 0 0;
				}
				.cps_desc{
					height: 40rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
				}
			}
		}
		.cu-list.menu-avatar>.cu-item>.cu-avatar{left: 0px;}
		.cu-list.menu-avatar>.cu-item .content{left: 150rpx;}
	}

	.dc-image-box{
		.dc_text{
			padding: 10px 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
	.dc-btb-view{
		align-self: center;
	}
</style>
